<template>
  <div class="qs-card" :style="cardPosition">
    <p class="qs-card-title"><span>
      <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
        <path
          d="M2 14h14v2h-16v-16h2zM4.5 13c-0.828 0-1.5-0.672-1.5-1.5s0.672-1.5 1.5-1.5c0.044 0 0.088 0.002 0.131 0.006l1.612-2.687c-0.154-0.235-0.243-0.517-0.243-0.819 0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.302-0.090 0.583-0.243 0.819l1.612 2.687c0.043-0.004 0.087-0.006 0.131-0.006 0.033 0 0.066 0.001 0.099 0.004l2.662-4.658c-0.165-0.241-0.261-0.532-0.261-0.845 0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.828-0.672 1.5-1.5 1.5-0.033 0-0.066-0.001-0.099-0.004l-2.662 4.658c0.165 0.241 0.261 0.532 0.261 0.845 0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.302 0.090-0.583 0.243-0.819l-1.612-2.687c-0.043 0.004-0.087 0.006-0.131 0.006s-0.088-0.002-0.131-0.006l-1.612 2.687c0.154 0.235 0.243 0.517 0.243 0.819 0 0.828-0.672 1.5-1.5 1.5z"
          fill="#ffffff"></path>
      </svg>
      <span id="soil_pingjia_title">Statistics</span></span><span @click="hideBtn" class="qs-card-hidebtn"><svg viewBox="0 0 1045 1024"
                                                                                           version="1.1"
                                                                                           xmlns="http://www.w3.org/2000/svg"
                                                                                           width="16"
                                                                                           height="16"><path
      d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z"></path></svg></span></p>

    <div class="qs-chart-input-div" >
      <a-row :gutter="6">
        <a-col :span="3">
          <a-select size="small" default-value="NDVI">
            <a-select-option v-for="item in indexOptions" :key="item.key">{{ item.key }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select @change="getDistrict" style="min-width: 120px" size="small"> <!--  default-value="PUNJAB" -->
            <a-select-option v-for="item in provinceOptions" :key="item.key">{{ item.key }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select @change="setDistrict" size="small" style="min-width: 120px">
            <a-select-option v-for="item in districtOptions" :key="item.key">{{ item.key }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="9">
          <a-range-picker size="small"></a-range-picker>
        </a-col>
        <a-col :span="3">
          <a-button type="primary" @click="getStatisticData" size="small">
            Statistics
          </a-button>
        </a-col>
      </a-row>

    </div>
    <div id="myChart" :style="{width: '420px', height: '200px'}"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'TimeseriesCard',
  props: {
    cardLeft: {
      type: String
    },
    cardWidth: {
      type: String
    },
    cardHeight: {
      type: String
    },
    cardBottom: {
      type: String
    },
    cardDisplay: {
      type: String
    }
  },
  data () {
    return {
      display: 'none',
      indexOptions: [{ label: 'NDVI', key: 'NDVI' },
        { label: 'LAI', key: 'LAI' },
        { label: 'LST', key: 'LST' }],
      provinceOptions: [
        /* { label: 'Azad Kashmir', key: 'Azad Kashmir' },
        { label: 'Baluchistan', key: 'Baluchistan' },
        { label: 'F.A.T.A.', key: 'F.A.T.A.' },
        { label: 'F.C.T.', key: 'F.C.T.' },
        { label: 'N.W.F.P.', key: 'N.W.F.P.' },
        { label: 'Northern Areas', key: 'Northern Areas' },
        { label: 'Punjab', key: 'Punjab' },
        { label: 'Sind', key: 'Sind' } */],
      districtOptions: [],
      province: '',
      district: ''
    }
  },
  computed: {
    cardPosition () {
      let styleObj = {
        width: this.cardWidth,
        height: this.cardHeight,
        top: this.cardBottom,
        left: this.cardLeft,
        display: this.display
      }
      return styleObj
    }
  },
  mounted () {
    this.drawLine()
    this.getProvince()
  },
  created () {

  },
  methods: {
    getProvince () {
      // console.log(this.$data)
      let that = this
      axios.get('/list', {
      }).then(function (res) {
        let objs = JSON.parse(res.data.data)
        let len = objs.length
        for (let i = 0; i < len; i++) {
          let obj = {label: objs[i].name, key: objs[i].name}
          that.provinceOptions.push(obj)
        }
        // console.log(res.data.data)
      }).catch(function (error) {
        console.log(error)
      })
    },
    getDistrict (province) {
      this.province = province
      this.district = ''
      let that = this
      axios.get('/district/list', {
        params: {
          name: province
        }
      }).then(function (res) {
        // console.log(res.data)
        let objs = JSON.parse(res.data.data)
        let len = objs.length
        for (let i = 0; i < len; i++) {
          let obj = {label: objs[i].name, key: objs[i].name}
          that.districtOptions.push(obj)
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    setDistrict (district) {
      this.district = district
    },
    getStatisticData () {
      console.log(this.province)
      console.log(this.district)
    },
    onChange (date, dateString) {
      console.log(date, dateString)
    },
    hideBtn () {
      // this.cardDisplay = 'none'
      this.display = 'none'
    },
    displayBtn () {
      // this.cardDisplay = 'block'
      this.display = 'block'
    },
    drawLine () {
      var xAxisData = ['2020/05/01', '2020/05/02', '2020/05/03', '2020/05/04', '2020/05/05', '2020/05/06', '2020/05/07', '2020/05/08']
      var data1 = [1.5, 1.2, 1.1, 0.8, 0.7, 0.55, 0.3, 0.22]
      // var data2 = []
      /* for (var i = 0; i < 8; i++) {
        // xAxisData.push('2020/02/27')
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5)
      } */
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        color: ['#c23531', '#26da6f', '#dc6d6a', '#949fa5'],
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: 'white',
            rotate: 30,
            formatter: function (a, e) {
              return a.replace(/^\d{4}\//, '')
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {color: 'white'}
        },
        series: [{
          name: 'bar',
          type: 'bar',
          data: data1,
          animationDelay: function (idx) {
            return idx * 10
          }
        }/*, {
          name: 'bar2',
          type: 'bar',
          data: data2,
          animationDelay: function (idx) {
            return idx * 10 + 100
          }
        } */],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5
        }
      })
    }
  }
}
</script>

<style scoped>
  .ant-input {
    background-color: #222;
    color: #bdbdbd;
  }
  .ant-select-selection{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }
  .ant-calendar-picker-input.ant-input.ant-input-sm{
    background-color: rgba(34, 34, 34, 0.82);
    color: #bdbdbd;
  }

  .qs-chart-input-div{
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .qs-card, .modulebox_toggle__2aOEV:hover {
    border: 1px solid #7a7e84;
    background: rgba(33, 36, 37, .62)
  }

  .qs-card {
    position: absolute;
    -webkit-transition: all .18s ease-in;
    transition: all .18s ease-in;
    width: 388px;
    padding: 10px;
    color: #ccc;
    z-index: 999
  }

  .qs-card:after {
    top: -1px;
    bottom: -1px;
    left: 10px;
    right: 10px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333
  }

  .qs-card:after, .qs-card:before {
    content: "";
    position: absolute;
    background: transparent;
    z-index: 0;
    pointer-events: none
  }

  .qs-card:before {
    top: 10px;
    bottom: 10px;
    left: -1px;
    right: -1px;
    border-left: 1px solid #333;
    border-right: 1px solid #333
  }

  .qs-card .qs-card-title {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    background: rgba(100, 191, 255, .3);
    text-align: left;
    color: #fff;
    margin: 0 10px 0 0;
    position: relative;
    padding: 5px 0 5px 10px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    border-left: 5px solid #64bfff;
    vertical-align: middle
  }

  .qs-card .qs-card-title svg {
    vertical-align: middle;
    margin-right: 5px
  }

  .qs-card .qs-card-title:after {
    position: absolute;
    right: -10px;
    bottom: 10px;
    top: 0;
    content: "";
    background: rgba(100, 191, 255, .3);
    width: 10px;
    pointer-events: none
  }

  .qs-card .qs-card-title:before {
    position: absolute;
    right: -10px;
    bottom: 0;
    content: "";
    border-bottom: 5px solid rgba(100, 191, 255, .3);
    border-right: 5px solid rgba(100, 191, 255, .3);
    border-color: rgba(100, 191, 255, .3) transparent transparent rgba(100, 191, 255, .3);
    border-style: solid;
    border-width: 5px;
    width: 0;
    height: 0;
    pointer-events: none
  }

  .qs-card .qs-card-title .qs-card-hidebtn {
    float: right;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer
  }

  .qs-card .qs-card-title .qs-card-hidebtn svg {
    fill: #999;
    -webkit-transition: all .18s ease-in;
    transition: all .18s ease-in
  }

  .qs-card .qs-card-title .qs-card-hidebtn:hover svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    fill: #fff
  }

  .qs-card .modulebox_list__3v4ZC {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 0
  }

  .qs-card .modulebox_list__3v4ZC .modulebox_listTable__1tHf3 {
    overflow: auto;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0
  }
</style>
